.videoRouting {
  display: flex;
  height: 100%;
  justify-content: space-between;
  user-select: none;

  .leftInput, .rightOutput {
    //height: 100%;
    overflow: auto;
    //width: 256px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    //background-color: #293D76;
    margin-top: 20px;
    height: calc(100% - 40px);
    background: linear-gradient(0deg, rgba(25, 38, 86, 0.9), rgba(41, 61, 118, 0.96));
    width: 280px;
    margin-left: 20px;

    .title {
      height: 38px;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.45);
      //background-color: #141414;
      //border-inline-end: 1px solid rgba(253, 253, 253, 0.12);
      padding: 8px 16px;
      line-height: 1.5714285714285714;
    }

    > ul[class^='ant-menu'] {
      top: 228px;
      position: absolute;
      height: calc(100% - 520px);
      overflow: auto;
      background: unset !important;
      width: 280px !important;
      border-inline-end: unset !important;
    }

    .control {
      height: calc(480px - 208px);
      padding: 10px;
      display: flex;
      border-top: 1px solid #384F91;

      .panel {
        width: 100%;
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .liveTitle {
          height: 65px;

          .title1 {
            font-size: 16px;
            color: #FFFFFF;
          }

          .value {
            font-size: 18px;
            color: #609FFD;
          }

          .value1 {
            font-size: 18px;
            color: #A5B3DA;
          }
        }

        .btn {
          //border: 1px solid #ccc;
          background-color: #4893F9;
          border-radius: 50px;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;

          &:hover {
            background-color: seagreen;
            //color: seagreen;
          }
        }
      }
    }
  }

  .rightOutput {
    > ul[class^='ant-menu'] {
      top: 208px;
      position: absolute;
      height: calc(100% - 408px);
      overflow: auto;
      background: unset !important;
    }
  }
}

.centerVideo {
  //display: flex;
  flex: 1;
  //flex-direction: column;
  //height: 100%;
  background-color: #000;
  overflow: hidden;
  margin-top: 20px;
  height: calc(100% - 40px);
  //background: linear-gradient(0deg, rgba(25, 38, 86, 0.9), rgba(41, 61, 118, 0.96));
  margin-left: 20px;
  margin-right: 20px;
  //flex: 1;
  padding: 0;

  .videoWrapper {
    height: calc(100% - 40px);
    width: 100%;
    //position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .video {
    width: 100%;
    height: 100%;

    :global {
      .video-js {
        display: contents;

        div[class='vjs-control-bar'] {
          span[title="录像"] {
            display: none !important;
          }
        }
      }
    }
  }

  .fuseBarr {
    position: relative;
    //bottom: 100%;
    //background-color: aqua;
    top: -100%;
    width: 100%;
    height: 100%;
  }

  .toolBar {
    //position: absolute;
    //bottom: 0;
    //width: calc(100% - 256px);
    height: 40px;
    background: rgba(255, 255, 255, 0.4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;

    .startRongPing, .stopRongPing {
      width: 200px;
      height: 100%;
      display: flex;
      align-items: center;
    }

    .stopRongPing {
      justify-content: flex-end;
    }

    .splitScreen {
      width: 200px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .toolIcon {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      .toolIconSvg {
        width: 30px;
        height: 30px;
      }

      &.active1 {
        background-color: red;

        .toolIconSvg {
          path {
            fill: white;
          }

          .backContent {
            color: white;
          }
        }
      }

      &.active,
      &:active,
      &:hover {
        background: gray;

        .toolIconSvg {
          path {
            fill: white;
          }

          .backContent {
            color: white;
          }
        }
      }
    }

  }
}

.previewDrop,
.playerWrapper {
  width: 100%;
  height: 100%;

  .dropTitleWrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    cursor: pointer;
    user-select: none;

    &:hover, &:active {
      > .dropTitle {
        color: blue;
      }
    }

    > .dropTitle {
      cursor: pointer;
      width: 100%;
      font-size: 18px;
      line-height: 18px;
      text-align: center;
      height: 18px;
    }
  }

  ._1x1 {
    width: 100%;
    height: 100%;
    display: flex;
  }

  ._1x2 {
    width: 50%;
    height: 100%;
    display: flex;

    &:nth-child(1) {
      border-right: 1px solid;
    }

    &:nth-child(2) {
      position: relative;
      left: 50%;
      bottom: 100%;
    }
  }

  ._2x2 {
    width: calc(50% - 1px);
    height: 50%;
    display: inline-flex;
    position: relative;

    &:nth-child(3),
    &:nth-child(4) {
      bottom: 0;
    }

    &:nth-child(1) {
      border-right: 1px solid;
      border-bottom: 1px solid;
    }

    &:nth-child(2) {
      border-bottom: 1px solid;
    }

    &:nth-child(3) {
      border-right: 1px solid;
    }
  }

  ._LEFT1xRIGHT3 {
    display: flex;

    &:nth-child(1) {
      width: 66.6666666666666%;
      height: 100%;
      //margin-top: calc((439px - 292.5px) / 2);
    }

    &:nth-child(2),
    &:nth-child(3),
    &:nth-child(4) {
      position: relative;
      width: calc(33% - 1px);
      height: 33.3333333333333%;
      border-left: 1px solid;
      border-bottom: 1px solid;
      left: 66.6666666666666%;
      bottom: 100%;
    }

    &:nth-child(2) {
    }

    &:nth-child(3) {
    }

    &:nth-child(4) {
      border-bottom: none;
    }
  }

  ._LEFT1xRIGHT_BOTTOM1 {
    display: flex;

    &:nth-child(1) {
      width: 100%;
      height: 100%;
      //margin-top: calc((439px - 292.5px) / 2);
    }

    &:nth-child(2) {
      width: 33.3333333333333%;
      height: 33.3333333333333%;
      //margin-top: calc((439px - 292.5px) / 2);
      position: absolute;
      bottom: 0;
      right: 0;
      border-left: 1px solid;
      border-top: 1px solid;
    }
  }
}

.previewDrop {
  //display: none;

  //&.active {
  //  display: block;
  background-color: rgba(255, 255, 255, 0.6);
  //}
}

.ptz {
  //background-color: #141414;
  display: flex;
  width: 100%;
  height: 200px;
  flex-direction: column;
  align-items: center;

  .title {
    height: 38px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.45);
    background-color: #141414;
    border-inline-end: 1px solid rgba(253, 253, 253, 0.12);
    padding: 8px 16px;
    line-height: 1.5714285714285714;
    width: 100%;
  }

  .ptzSvg {
    width: 30px;
    height: 30px;
    cursor: pointer;

    path {
      fill: white;
    }

    .backContent {
      color: white;
    }

    &.active,
    &:active,
    &:hover {
      background: gray;

      path {
        fill: white;
      }

      .backContent {
        color: white;
      }
    }
  }


  .ptzControl {
    display: flex;
    width: 120px;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .ptzUp, .ptzDown {
      width: 100%;
      display: flex;
      justify-content: center;
    }

    .ptzCenter {
      width: 100%;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .ptzZoom {
      width: 80px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

}
